import React, { useState, Suspense } from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, BrowserRouter, Route, Link, NavLink, Redirect, Switch } from 'react-router-dom'
import Protect from './Protect'
// import Home from './views/Home'

// import List from './views/List'
import About from './views/About'
const List = React.lazy(() => import(/*webpackChunkName:"List" */'./views/List'))

// const Home = import(/*webpackChunkName:"home" */'./views/Home')
/* 
  HashRouter 就是hash模式
  BrowserRouter 就是history模式
  Route  router-view
  Link/NavLink   router-link

  路由的传参： query传参  获取 自己写正则获取
              params传参 获取  通过this.props.match.params
              state传参  仅适用于history模式，hash刷新会丢失

  编程式导航： this.props.history.push  .replace .go .goBack            
*/
function NoFound() { return <h1>404</h1> }
function Loading() { return <h1>loading</h1> }
function loadable(obj) {
  let { loader, loading: Loading } = obj
  let Com;
  return function (props) {
    let [flag, setFlag] = useState(false);
    if (!flag) {
      loader().then(data => {
        // data.default
        Com = data.default;
        setFlag(true)
      })
    }
    return <>
      {flag ? <Com {...props} /> : <Loading></Loading>}
    </>
  }
}

const Home = loadable({
  loader: () => import(/*webpackChunkName:"home" */'./views/Home'),
  loading: Loading
})

class App extends React.Component {
  constructor() {
    super();

  }
  render() {
    return <Suspense className='' fallback={<Loading />}>
      <NavLink to='/home?qq=123'>首页</NavLink>
      {/* <NavLink to={{ pathname: '/home' }}>首页</NavLink> */}
      {/* <NavLink to='/list'>列表页</NavLink> */}
      <NavLink to={{ pathname: '/list', state: { a: 1, b: 3, t: 5 } }}>列表页</NavLink>
      <NavLink to='/about/666'>about</NavLink>
      {/* <Route path='/' exact component={Home}></Route> */}
      <Switch>
        {/* <Redirect path='/' exact to='/home'></Redirect> */}
        <Route path='/' exact render={() => {
          // return <h2>555555</h2> 返回的可以是一个组件 也可以是一个标签
          return <Redirect to='/home'></Redirect>
        }}></Route>
        <Protect path='/home' component={Home}></Protect>
        <Protect path='/list' component={List}></Protect>
        <Route path='/about/:id' component={About}></Route>
        <Route path='/404' component={NoFound}></Route>
        <Redirect path='/*' to='/404'></Redirect>
      </Switch>
    </Suspense>;
  }
}

ReactDOM.render(<BrowserRouter>
  <App />
</BrowserRouter>, document.getElementById('root'))